<template>
	<div>
		<!-- 商品卡片列表 -->
		<van-card v-for="(item,i) in iphoneList" :key="i" :price="item.price" :num="item.sold_count" :desc="item.spec"
			:title="item.title" :thumb=" item.pic"></van-card>
	</div>
</template>

<script>
	//1.导入封装后的接口  前端 MockJS 
	import { getIphoneListAPI } from "@/api/iphone.js";

	export default {
		data() {
			return {
				iphoneList: [],
			}
		},

		//生命周期的钩子函数
		created() {
			this.loadData()
		},
		methods: {
			// 数据加载
			loadData() {
				getIphoneListAPI().then((result) => {
					console.log(result); //调式输出，看数据结构
					this.iphoneList = result.data; //数据拼接
				})
			},
		},
	}
</script>

<style lang="less" scoped="scoped">
	/deep/.van-card {
		font-size: 14px;

		.van-card__content {
			justify-content: center;

			.van-card__price {
				color: red;
				font-weight: bold;
				text-align: right;
			}
		}
	}
</style>